<script src="<@baseUrl url='/static/comm/plugins/qiniu/qiniu.min.js'/>"></script>
<script type="text/javascript" >
    AppComm.include.load("<@baseUrl url='/static/comm/js/unit/fileUploadUnit.js'/>","js");
    AppComm.include.load("<@baseUrl url='/static/comm/js/example/qiniu.js'/>","js");
</script>

<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
    <ul class="layui-tab-title">
        <li class="layui-this">预览</li>
        <li>代码</li>
        <li>说明</li>
    </ul>
    <div class="layui-tab-content" style="height: 100px;">
        <div class="layui-tab-item layui-show">

            <div style="padding: 10px; background-color: #F2F2F2;">
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md6">
                        <div class="layui-card">
                            <div class="layui-card-header">普通上传</div>
                            <div class="layui-card-body">
                                <input id="fileName1" type="text" placeholder="文件名称" class="layui-input" style="width:200px;" disabled="true">
                                <img id="image1" src="#" alt="">
                                <br>
                                <button class="layui-btn layui-btn-primary layui-btn-sm" id="uploadObject" ><i class="layui-icon">&#xe67c;</i>选择</button>
                                <button class="layui-btn layui-btn-primary layui-btn-sm" id="uploadObjectBindAction" >上传</button>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-card">
                            <div class="layui-card-header">单文件上传</div>
                            <div class="layui-card-body">
                                <input id="fileName2" type="text" placeholder="文件名称" class="layui-input" style="width:200px;" disabled="true">
                                <img id="image2" src="#" alt="">
                                <br>
                                <button class="layui-btn layui-btn-primary layui-btn-sm" id="uploadObject2" ><i class="layui-icon">&#xe67c;</i>选择</button>
                                <button class="layui-btn layui-btn-primary layui-btn-sm" id="uploadObject2BindAction" >上传</button>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md12">
                        <div class="layui-card">
                            <div class="layui-card-header">多文件上传</div>
                            <div class="layui-card-body">
                                <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" id="multipleUploadObject"><i class="layui-icon">&#xe67c;</i>选择</button>
                                <button class="layui-btn layui-btn-primary layui-btn-sm" id="multipleUploadObjectBindAction" >上传</button>
                                <div class="layui-upload-list">
                                    <table class="layui-table">
                                        <thead>
                                        <tr><th>文件名</th>
                                            <th>大小</th>
                                            <th>操作</th>
                                        </tr></thead>
                                        <tbody id="multipleUploadObjectListView"></tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="layui-col-md6">
                        <div class="layui-card">
                            <div class="layui-card-header">删除文件</div>
                            <div class="layui-card-body">
                                <input id="qiniuDeleteKey" type="text" placeholder="文件key" class="layui-input" style="width:400px;">
                                <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" id="qiniuDeleteByKeyButton">删除文件</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="layui-tab-item">


            <div style="padding: 10px; background-color: #F2F2F2;">
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md12">
                        <div class="layui-card">
                            <div class="layui-card-header">引入js</div>
                            <div class="layui-card-body">

                                <pre class="layui-code" lay-title="html" lay-encode="true">
<script src="<@baseUrl url='/static/comm/plugins/qiniu/qiniu.min.js'/>"></script>
<script type="text/javascript" >
    AppComm.include.load("<@baseUrl url='/static/comm/js/unit/fileUploadUnit.js'/>","js");
</script>
                                </pre>

                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <div style="padding: 10px; background-color: #F2F2F2;">
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md12">
                        <div class="layui-card">
                            <div class="layui-card-header">单文件上传</div>
                            <div class="layui-card-body">

                                <pre class="layui-code" lay-title="html" lay-encode="true">
<input id="fileName2" type="text" placeholder="文件名称" class="layui-input" style="width:200px;"  disabled="true">
<img id="image2" src="#" alt="">
<button class="layui-btn layui-btn-primary layui-btn-sm" id="uploadObject2" ><i class="layui-icon">&#xe67c;</i>选择</button>
<button class="layui-btn layui-btn-primary layui-btn-sm" id="uploadObject2BindAction" >上传</button></pre>
                                <pre class="layui-code" lay-title="javascript" lay-encode="true">
var uploadObject2 = new FileUploadUnit("uploadObject2");

uploadObject2.callbackFun.choose = function(obj) {
    $('#fileName2').val(obj.resultData.fileName);
};
uploadObject2.callbackFun.complete = function(res){
    var url = FileUploadUnit.getQiniuUrl(res);
    $("#image2").attr("src",url);
};
uploadObject2.singleFileInit();
                                </pre>

                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div style="padding: 10px; background-color: #F2F2F2;">
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md12">
                        <div class="layui-card">
                            <div class="layui-card-header">多文件上传</div>
                            <div class="layui-card-body">

                                <pre class="layui-code" lay-title="javascript" lay-about=false>
uploadObject2.callbackFun.complete = function(res){
    var url = FileUploadUnit.getQiniuUrl(res);
    $("#image2").attr("src",url);
};
uploadObject2.singleFileInit();;
                                </pre>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-tab-item">

            文件上传组件：依赖于jQuery、layui、layer、qiniu前后台、appComm.js

        </div>
    </div>
</div>

